<template>
  <div>
    <p v-red>我是v-red指令</p>
    <p v-bg="'pink'">我是v-bg指令</p>
    <p v-bg="'yellow'">我是v-bg指令</p>
    <p v-red>我是v-red指令</p>
  </div>
</template>

<script>
export default {
  name: "App",
  // 封装一个局部自定义指令 可以操作背景颜色
  directives: {
    // 自定义指令函数接收的第一个参数就是当前指令要操作的真实DOM
    red(el) {
      el.style.background = "red";
    },

    // 自定义指令函数接收的第二个参数就是当前指令的详细内容，包含value属性就是当前指令的值
    bg(el, binding) {
      console.log(el, binding);
      el.style.background = binding.value;
    },
  },
};
</script>

<style></style>
